<template>
  <div class="registry">
    <div class="reg-l">
      <h2>Artifacts</h2>
      <n-spin size="large" :show="tableData.length === 0">
        <n-data-table
            class="table"
            :columns="tableCols"
            :data="tableData"
            :bordered="false"
            :row-key="row => row.id"
            @update:checked-row-keys="handleCheck"
            :default-checked-row-keys="defaultCheckedRow"
        />
      </n-spin>
    </div>
    <div class="reg-r">
      <h2>Metrics</h2>
      <n-spin size="large" :show="tableData.length === 0">
        <div class="met">
          <div class="met-item">
            <p style="font-size: 20px">Train Loss</p>
            <div style="font-size: 40px">
              <n-number-animation :from="0" :to="metrics[0]" :precision="3"/>
            </div>
          </div>
          <div class="met-item">
            <p style="font-size: 20px">Train Accuracy</p>
            <div style="font-size: 40px">
              <n-number-animation :from="0" :to="metrics[1]" :precision="3"/>
            </div>
          </div>
          <div class="met-item">
            <p style="font-size: 20px">Val Loss</p>
            <div style="font-size: 40px">
              <n-number-animation :from="0" :to="metrics[2]" :precision="3"/>
            </div>
          </div>
          <div class="met-item">
            <p style="font-size: 20px">Val Accuracy</p>
            <div style="font-size: 40px">
              <n-number-animation :from="0" :to="metrics[3]" :precision="3"/>
            </div>
          </div>
        </div>
      </n-spin>
      <div class="met-center met-r--i">
        <div class="met-center--item">
          <span class="met--subtitle">Framework</span>
          <img src="@/assets/pytorch.png" alt="" style="height: 45px;">
        </div>
        <div class="met-center--item">
          <span class="met--subtitle">Job Details</span>
          <div class="met-center--item_btns">
            <img src="@/assets/ray.png" alt="">
            <span>Ray Dashboard</span>
          </div>
        </div>
      </div>
      <div class="met-r--i">
        <div class="met-r--last">
          <div class="met--subtitle">Execution Flow</div>
          <div class="met-center--item_btns">
            <img src="@/assets/dagster-primary-mark.svg" alt="">
            <span>Dagit</span>
          </div>
        </div>
        <iframe src="http://10.112.67.227:13000/asset-groups" border="0" frameborder="no" framespacing="0" class="met-r--ifr"> </iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Download } from '@icon-park/vue-next'
import { NDataTable, NSpin, NNumberAnimation} from 'naive-ui'
import {h, onMounted, reactive, ref} from "vue";
import fiatBE from "@/api/fiatBE";

let tableCols = [
  { type: 'selection', multiple: false },
  { key:'name', title:'Name' },
  { key:'time', title:'Time' },
  { key:'Archieve',
    title:'Archieve',
    render(row) {
      return h(
          Download,
          {
            size: 24,
            style: {
              display: 'block',
              textAlign: 'center',
              cursor: 'pointer'
            },
            onClick: () => window.open(`https://fiat.elapsed29.top/fiat${row.archive_link}`)
          },
          {}
      )
    }

  },
]
let tableData = ref([])
let defaultCheckedRow = reactive([''])

let metrics = ref([])

function handleCheck(_,e) {
  console.log(e)
  metrics.value = e[0].metrics
}

onMounted(() => {
  fiatBE.get('/artifact/fetch').then(res => {
    tableData.value = res.data.map(i => {
      let ms = Object.values(i.artifact_info.metrics).map(m => m===parseInt(m)?m:m.toFixed(3))
      return {
        id: i.id,
        name: i.artifact_info.name,
        time: i.created.split('T')[0],
        archive_link:i.artifact_info.archive_link,
        metrics: ms
      }
    })
    defaultCheckedRow[0] = res.data[0].id
    metrics.value = tableData.value[0].metrics
  })
})

</script>

<style scoped>
.registry {
  display: flex;
  flex-direction: row;
}
.registry h2 {
   font-size: var(--settingTitleFontSize);
   margin-top: 0;
}
.reg-l{
  width: 30%;
  margin-right: 4%;
}
.reg-r {
  flex: 1;
}
.table {
  border-radius: 10px;
}
.met {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid black;
  border-radius: 10px;
}
.met-item {
  text-align: center;
  padding: 20px;
  width: 25%;
}
.met-item:nth-child(-n+3){
  border-right: 1px solid black;
}
.met-r--i {
  margin: 30px 0;
  font-size: 26px;
}
.met-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.met-center--item * {
  vertical-align: middle;
}
.met-center--item {
  display: flex;
  align-items: center;
}

.met-center--item_btns {
  height: 50px;
  width: 270px;
  font-size: 20px;
  border-radius: 10px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.met-center--item_btns:hover {
  cursor: pointer;
}
.met-center--item_btns img {
  height: 45px;
  margin: 0 10px 0 -10px;
}
.met--subtitle {
  font-weight: bold;
  margin-right: 20px;
}
.met-r--last {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.met-r--i .met-r--ifr{
  border: 1px solid black;
  border-radius: 10px;
  margin-top: 20px;
  width: 100%;
  height: 36vh;
}
</style>
